<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      stripe
      :expand-row-keys="expandedKeys"
      :tree-props="treeProps"
      @expand-change="handleExpandChange"
    >
      <el-table-column prop="name" label="菜单名称" width="200">
      </el-table-column>
      <el-table-column prop="icon" label="icon" width="80">
        <template slot-scope="{ row }">
          <span :class="row.icon"></span>
        </template>
      </el-table-column>

      <el-table-column prop="isBusi" label="业务菜单" width="110" sortable>
        <template slot-scope="{ row }">
          <span
            v-show="row.isBusi == 1"
            class="color-success el-icon-success"
          ></span>
          <span
            v-show="row.isBusi != 1"
            class="color-danger el-icon-error"
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="isDev" label="开发菜单" width="110" sortable>
        <template slot-scope="{ row }">
          <span
            v-show="row.isDev == 1"
            class="color-success el-icon-success"
          ></span>
          <span
            v-show="row.isDev != 1"
            class="color-danger el-icon-error"
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="isPublic" label="公共菜单" width="110" sortable>
        <template slot-scope="{ row }">
          <span
            v-show="row.isPublic == 1"
            class="color-success el-icon-success"
          ></span>
          <span
            v-show="row.isPublic != 1"
            class="color-danger el-icon-error"
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="del" label="是否激活" width="110" sortable>
        <template slot-scope="{ row }">
          <span
            v-show="row.del == 1"
            class="color-success el-icon-success"
          ></span>
          <span v-show="row.del != 1" class="color-danger el-icon-error"></span>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="是否按钮" width="110" sortable>
      </el-table-column>
      <el-table-column prop="orderSort" label="菜单排序" width="90">
      </el-table-column>
      <el-table-column prop="url" label="路径" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button type="success" size="mini" @click="handleAdd(row)"
              >新增子菜单</el-button
            >
            <el-button type="primary" size="mini" @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="handleDelete(row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { tbMenuDelete, tbMenuQueryHomeData } from '@/api/admin/system/menu'
export default {
  data() {
    return {
      expandedKeys: [],
      tableData: [],
      treeProps: {
        children: 'childList',
        hasChildren: 'hasChildren',
      },
    }
  },
  mounted() {
    this.tableData = this.$store.getters.menuData
    this.$bus.$on('refreshMenuList', () => {
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshMenuList')
  },
  methods: {
    //获取列表
    getList() {
      let userinfo = JSON.parse(this.getSession('userinfo'))
      tbMenuQueryHomeData(userinfo.id).then((res) => {
        if (res.data.code == 0) {
          var data = res.data.data[0].menuList
          if (userinfo.id != -1) {
            data.forEach((e) => {
              if (e.id == 16) {
                e.childList.forEach((k, index) => {
                  if (k.id == 47) {
                    e.childList.splice(index, 1)
                  }
                })
              }
            })
          }
          this.tableData = res.data.data[0].menuList
          this.$store.commit(
            'SETMENUDATA',
            JSON.parse(JSON.stringify(this.tableData)),
          )
        }
      })
    },
    handleAdd(row) {
      this.$bus.$emit('showAddDialogAddMenu', row, 1)
    },
    handleEdit(row) {
      this.$bus.$emit('showAddDialogAddMenu', row, 2)
    },
    // 删除确认
    handleDelete(row) {
      this.deleteTips(() => {
        this.delete(row)
      })
    },
    //删除
    delete(row) {
      tbMenuDelete(row.id).then((res) => {
        if (res.data.code == 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success',
          })
        }
      })
    },
    //树形展开收缩
    handleExpandChange(row, flag) {
      if (flag) {
        this.expandedKeys.push(row.id)
      } else {
        let idx = this.expandedKeys.indexOf(row.id)
        this.expandedKeys.splice(idx, 1)
      }
    },
  },
}
</script>